<template>
  <div style="padding: 0">
    <comp-banner> </comp-banner>
    <div class="w">
      <!-- <div class="row d-flex mt-4">
        <a href="#" class="item col-lg-3 col-6">
          <img
            src="https://photo7n.gracg.com/admin_9d079ef506fcdc84d968c14f648a299a.jpg"
            alt=""
            class="w-100"
          />
          <p class="bg-dark text-white text-center">颜彩如何塑造质感与氛围</p>
        </a>
        <a href="#" class="item col-lg-3 col-6">
          <img
            src="https://photo7n.gracg.com/admin_9d079ef506fcdc84d968c14f648a299a.jpg "
            alt=""
            class="w-100"
          />
          <p class="bg-dark text-white text-center">颜彩如何塑造质感与氛围</p>
        </a>
        <a href="#" class="item col-lg-3 col-6">
          <img
            src="https://photo7n.gracg.com/admin_9d079ef506fcdc84d968c14f648a299a.jpg"
            alt=""
            class="w-100"
          />
          <p class="bg-dark text-white text-center">颜彩如何塑造质感与氛围</p>
        </a>
        <a href="#" class="item col-lg-3 col-6">
          <img
            src="https://photo7n.gracg.com/admin_9d079ef506fcdc84d968c14f648a299a.jpg"
            alt=""
            class="w-100"
          />
          <p class="bg-dark text-white text-center">颜彩如何塑造质感与氛围</p>
        </a>
      </div> -->
      <!-- 首页推荐 -->
      <div class="works">
        <div class="works-header">
          <comp-works-title>
            <template v-slot:title>
              <h2>首页推荐</h2>
            </template>
            <template v-slot:btn
              ><router-link to="/" class="btn">推荐</router-link>
              <router-link to="/" class="btn2">精选</router-link>
            </template>
          </comp-works-title>
        </div>
        <div class="works-body">
          <ul class="row">
            <li
              class="col-6 col-lg-3 mt-4 mb-4"
              v-for="item in recommendModule.index_recommend"
              :key="item.id"
            >
              <comp-search-item :item="item"></comp-search-item>
              <!-- <comp-index-tuijian> </comp-index-tuijian> -->
            </li>
          </ul>
        </div>
      </div>
      <comp-banner-2></comp-banner-2>
      <!-- 最近推荐作品 -->
      <div class="works">
        <div class="works-header">
          <comp-works-title>
            <template v-slot:title>
              <h2>最近推荐作品</h2>
            </template>
            <template v-slot:btn>
              <router-link to="/" class="btn2">更多</router-link>
            </template>
          </comp-works-title>
        </div>
        <div class="tuijian-works-body">
          <ul class="r">
            <li
              class="worksitem"
              v-for="item in recommendModule.recent_recommend"
              :key="item.id"
            >
              <a href="#" :item="item">
                <el-image :src="item.imgUrl" lazy></el-image>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 热门作品 -->
      <div class="works">
        <div class="works-header">
          <comp-works-title>
            <template v-slot:title>
              <h2>热门作品</h2>
            </template>
            <template v-slot:btn>
              <router-link to="/" class="btn2">更多</router-link>
            </template>
          </comp-works-title>
        </div>
        <div class="tuijian-works-body">
          <ul class="r">
            <li
              class="worksitem"
              v-for="item in worksModule.hot_works"
              :key="item.id"
            >
              <a href="#" :item="item">
                <el-image :src="item.imgUrl" lazy></el-image>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CompBanner from "../components/comp-banner.vue";
import CompBanner2 from "../components/comp-banner2.vue";
import CompIndexTuijian from "../components/comp-indexTuijian.vue";
import CompWorksTitle from "../components/comp-worksTitle.vue";

import { mapState } from "vuex";
import CompSearchItem from "../components/comp-search-item.vue";
export default {
  components: {
    CompBanner,
    CompWorksTitle,
    CompIndexTuijian,
    CompBanner2,
    CompSearchItem,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["recommendModule", "worksModule"]),
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
.r {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .item {
    // display: inline-block;
    // flex-grow: 1;
    flex-basis: 285px;
    text-decoration: none;
    padding: 0;
    img {
      width: 100%;
      vertical-align: middle;
    }
    p {
      text-align: center;
      padding: 5px 0;
      vertical-align: middle;
    }
  }
}
.works {
  .works-header {
    padding-top: 10px;
  }
  .works-body {
    .r {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: flex-start;
      padding-left: 0;
      li {
        flex-basis: 285px;
        height: 300px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        background-color: #f8f9fa;
        div {
          padding: 5px 10px 0 10px;
        }
      }
    }
  }
  .tuijian-works-body {
    .r {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: flex-start;
      padding-left: 0;
      .worksitem {
        // flex-grow: 1;
        height: 137px;
        flex-basis: 183px;
        // margin-right: 10px
        margin-bottom: 20px;
        padding-bottom: 10px;

        a {
          display: block;
          img {
            width: 183px;
          }
        }
      }
    }
  }
}
</style>